<template>
  <transition-group appear name="test">
    <div key="welcome">
      <div class="main-demo main-demo_wel" @click="clickBg" v-show="isShow"></div>
      <div class="main-demo" v-show="!isShow" v-cloak>
        <div class="clt">
          <div class="homeClt">
            <clt-item :qgData="qgData" :shopNum="shopNum" v-if="cityLv > 1" :key="cityLv"></clt-item>
          </div>
        </div>
        <div class="lishui">
          <div class="home">
            <MainHeader @yyrEmit="yyrEmit" />
            <div class="jsonMap">
              <div class="jm-item">&#12288;</div>
              <jsonMap ref="child" style="float: left" />
            </div>

            <oneLeft
              :province.sync="provinceList"
              style="width: 910px; left: 2060px"
              v-if="isShowLeft"
              :cityLv="cityLv"
              :cityList="cityList"
            />
            <newOneRight :qgData="qgData" v-if="cityLv > 1" :key="cityLv" />
            <!--        <shengRight v-if="cityLv == 2" :startT="startT" />-->
          </div>
        </div>
      </div>
    </div>
  </transition-group>
</template>
<script>
import cltItem from './clt/index'
import MainHeader from './MainHeader/index'
import oneLeft from './left/oneLeft'
import newOneRight from './right/newOneRight'
//import shengRight from './right/newOneRight/shengRight'
import jsonMap from './myMap/jsonMap'
import { rightData } from './right/newOneRight/rightData.js'
import http from '@/utils/request'
export default {
  components: {
    newOneRight,
    /*shengRight,*/
    jsonMap,
    MainHeader,
    oneLeft,
    cltItem,
  },
  data() {
    return {
      shopNum: '',
      isShow: false,
      currentName: '',
      cityLv: 1,
      yyr: '',
      startT: '',
      cityList: ['中国'],
      isShowLeft: true,
      timeEnd: '2022-12-31 00:00:00',
      editTime: '',
      ljzcshs: '', //累计注册商户数 编辑值
      ljzcxcsdps: '', //累计小超市店铺数 编辑值
      ljzcxbgdps: '', //累计小宾馆店铺数 编辑值
      zrxzshs: '', //昨日新增商户数量
      qgData: {},
      timer: null,
      provinceList: [],
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  mounted() {
    let _ = this
    this.queryBaseday(res => {
      _.shopNum = parseInt(res['shopNum'])
      _.isShow = true
      if (res['flag']) {
        _.queryZkReal()
        _.timer = setInterval(_.queryZkReal, 3600000) //张侃
      } else {
        _.queryJjReal()
        _.timer = setInterval(_.queryJjReal, 3600000) //进局
      }
    })
  },
  methods: {
    /***
     * 获取基础数据
     * @param callback
     * @returns {Promise<void>}
     */
    async queryBaseday(callback) {
      const res = await http.post('/khy/showData/getData', {}, { isLoading: false })
      this.editTime = res['addDate'] + ' 00:00:00'
      this.ljzcshs = res['sumShopNum']
      this.ljzcxcsdps = res['littleShopNum']
      this.ljzcxbgdps = res['hotelNum']
      this.zrxzshs = res['addShopNum']
      callback(res)
    },
    /***
     * 张侃接口入口
     * @param callback
     * @returns {Promise<void>}
     */
    queryZkReal() {
      let _ = this
      this.queryBaseday(() => {
        _.initZkData()
      })
    },
    /***
     * 张侃接口
     * 数据初始化
     * @param callback
     * @returns {Promise<void>}
     */
    initZkData() {
      let zdDate = new Date('2022-04-01 00:00:00')
      let ljzcshsReal = parseInt(this.acculateAdd(this.ljzcshs, this.addBySecond(15000, this.ljzcshs)))
      let sxts = parseInt(this.getDaysBetween(zdDate, new Date()))
      let csdps = parseInt(this.acculateAdd(this.ljzcxcsdps, this.addBySecond(13500, this.ljzcxcsdps)))
      let xbgdps = parseInt(this.acculateAdd(this.ljzcxbgdps, this.addBySecond(1500, this.ljzcxbgdps)))
      this.setQgData(ljzcshsReal, sxts, csdps, xbgdps)
      Object.assign(rightData, this.qgData)
      this.cityLv = new Date().getTime()
    },
    /***
     * 设置对象数据
     * @param callback
     * @returns {Promise<void>}
     */
    setQgData(ljzcshsReal, sxts, csdps, xbgdps) {
      this.qgData = {
        '01': [
          { name: '累计注册商户数', value: ljzcshsReal, util: '户' },
          { name: '昨日新增商户数', value: this.zrxzshs, util: '户' },
        ],
        '02': [
          {
            name: '累计注册店铺数',
            value: csdps + xbgdps,
            util: '户',
          },
          {
            name: '累计小超市店铺数',
            value: csdps,
            util: '户',
          },
          {
            name: '累计小宾馆店铺数',
            value: xbgdps,
            util: '户',
          },
        ],
        '03': [
          { name: '融资申请商户数', value: parseInt(ljzcshsReal * 0.3), util: '户' },
          { name: '融资办理成功商户数', value: parseInt(ljzcshsReal * 0.3 * 0.9), util: '户' },
        ],
        '04': [
          { name: '商户融资余额', value: parseFloat(ljzcshsReal * 0.3 * 0.9 * 42.8).toFixed(2), util: '万元' },
          { name: '累计融资金额', value: parseFloat(ljzcshsReal * 0.3 * 0.9 * 42.8 * 1.2).toFixed(2), util: '万元' },
        ],
        '05': {
          topData: [
            {
              name: '优惠费率收单回流金额',
              value: parseFloat(ljzcshsReal * (200 / 360) * sxts * 0.8).toFixed(2),
              util: '万元',
            },
          ],
          bottomData: [
            [{ name: '享受优惠费率商户数', value: parseInt(ljzcshsReal * 0.5 * 0.8), util: '户' }],
            [
              {
                name: '降低收单成本',
                value: parseFloat(ljzcshsReal * (200 / 360) * sxts * 0.8 * 0.05 * 0.01).toFixed(2),
                util: '万元',
              },
            ],
          ],
        },
        '08': [
          { name: '收单申请商户数', value: parseInt(ljzcshsReal * 0.5), util: '户' },
          { name: '成功办理收单商户数', value: parseInt(ljzcshsReal * 0.5 * 0.9), util: '户' },
        ],
        '09': [
          { name: '累计收单回流金额', value: parseFloat(ljzcshsReal * (200 / 360) * sxts).toFixed(2), util: '万元' },
          { name: '昨日收单回流金额', value: parseFloat(ljzcshsReal * (200 / 360)).toFixed(2), util: '万元' },
        ],
        10: [
          {
            name: '预计新增信贷资金',
            value: parseFloat(ljzcshsReal * (200 / 360) * sxts * 0.2).toFixed(2),
            util: '万元',
          },
          {
            name: '预计新增地方税收',
            value: parseFloat(ljzcshsReal * (200 / 360) * sxts * 0.2 * 6 * 0.01).toFixed(2),
            util: '万元',
          },
        ],
      }
    },
    /***
     * 进局接口入口
     * @param callback
     * @returns {Promise<void>}
     */
    queryJjReal() {
      let _ = this
      this.queryTestData(() => {
        _.initJjData()
      })
    },
    /***
     * 进局接口
     * 数据初始化
     * @param callback
     * @returns {Promise<void>}
     */
    initJjData() {
      let zdDate = new Date('2022-04-01 00:00:00')
      let sxts = parseInt(this.getDaysBetween(zdDate, new Date()))
      this.qgData = {
        '01': [
          { name: '累计注册商户数', value: this.ljzcshs, util: '户' },
          { name: '昨日新增商户数', value: this.zrxzshs, util: '户' },
        ],
        '02': [
          {
            name: '累计注册店铺数',
            value: this.ljzcxcsdps + this.ljzcxbgdps,
            util: '户',
          },
          {
            name: '累计小超市店铺数',
            value: this.ljzcxcsdps,
            util: '户',
          },
          {
            name: '累计小宾馆店铺数',
            value: this.ljzcxbgdps,
            util: '户',
          },
        ],
        '03': [
          { name: '融资申请商户数', value: parseInt(this.ljzcshs * 0.3), util: '户' },
          { name: '融资办理成功商户数', value: parseInt(this.ljzcshs * 0.3 * 0.9), util: '户' },
        ],
        '04': [
          { name: '商户融资余额', value: parseFloat(this.ljzcshs * 0.3 * 0.9 * 42.8).toFixed(2), util: '万元' },
          { name: '累计融资金额', value: parseFloat(this.ljzcshs * 0.3 * 0.9 * 42.8 * 1.2).toFixed(2), util: '万元' },
        ],
        '05': {
          topData: [
            {
              name: '优惠费率收单回流金额',
              value: parseFloat(this.ljzcshs * (200 / 360) * sxts * 0.8).toFixed(2),
              util: '万元',
            },
          ],
          bottomData: [
            [{ name: '享受优惠费率商户数', value: parseInt(this.ljzcshs * 0.5 * 0.8), util: '户' }],
            [
              {
                name: '降低收单成本',
                value: parseFloat(this.ljzcshs * (200 / 360) * sxts * 0.8 * 0.05 * 0.01).toFixed(2),
                util: '万元',
              },
            ],
          ],
        },
        '08': [
          { name: '收单申请商户数', value: parseInt(this.ljzcshs * 0.5), util: '户' },
          { name: '成功办理收单商户数', value: parseInt(this.ljzcshs * 0.5 * 0.9), util: '户' },
        ],
        '09': [
          { name: '累计收单回流金额', value: parseFloat(this.ljzcshs * (200 / 360) * sxts).toFixed(2), util: '万元' },
          { name: '昨日收单回流金额', value: parseFloat(this.ljzcshs * (200 / 360)).toFixed(2), util: '万元' },
        ],
        10: [
          {
            name: '预计新增信贷资金',
            value: parseFloat(this.ljzcshs * (200 / 360) * sxts * 0.2).toFixed(2),
            util: '万元',
          },
          {
            name: '预计新增地方税收',
            value: parseFloat(this.ljzcshs * (200 / 360) * sxts * 0.2 * 6 * 0.01).toFixed(2),
            util: '万元',
          },
        ],
      }
      Object.assign(rightData, this.qgData)
      this.cityLv = new Date().getTime()
    },
    async queryTestData(callback) {
      const res = await http.get('/shop/monitor', { isLoading: false, baseURL: 'http://111.1.139.66:8081' })
      let format = val => {
        return Number(val) < 10 ? '0' + val : '' + val
      }
      let formatDate = date => {
        let year = date.getFullYear()
        let month = format(date.getMonth() + 1)
        let da = format(date.getDate())
        return year + '-' + month + '-' + da
      }
      this.provinceList = res['provinceList']
      this.editTime = formatDate(new Date()) + ' 00:00:00'
      this.ljzcshs = res['totalMerchantCount']
      this.ljzcxcsdps = res['supermarketCount']
      this.ljzcxbgdps = res['hotelCount']
      this.zrxzshs = res['yesterdayIncrement']
      callback()
    },
    /***
     * 背景图点击
     * 切换
     * @param callback
     * @returns {Promise<void>}
     */
    clickBg() {
      this.isShow = !this.isShow
      this.$refs.child.childReturn()
    },
    //以下均为工具函数(浮点数运算)
    addBySecond(target, edit) {
      let time = new Date(this.editTime)
      let end = new Date(this.timeEnd)
      let timeSpace = (end - time) / 1000
      let param = this.acculateSub(target, edit) / timeSpace
      let now = new Date()
      let result = ((now - time) * param) / 1000
      return result
    },
    getDaysBetween(startDate, enDate) {
      const sDate = Date.parse(startDate)
      const eDate = Date.parse(enDate)
      if (sDate > eDate) {
        return 0
      }
      if (sDate === eDate) {
        return 1
      }
      const days = (eDate - sDate) / (1 * 24 * 60 * 60 * 1000)
      return days
    },
    acculateAdd(num1, num2) {
      let r1, r2, m, c
      try {
        r1 = num1.toString().split('.')[1].length
      } catch (e) {
        r1 = 0
      }
      try {
        r2 = num2.toString().split('.')[1].length
      } catch (e) {
        r2 = 0
      }
      c = Math.abs(r1 - r2)
      m = Math.pow(10, Math.max(r1, r2))
      if (c > 0) {
        let cm = Math.pow(10, c)
        if (r1 > r2) {
          num1 = Number(num1.toString().replace('.', ''))
          num2 = Number(num2.toString().replace('.', '')) * cm
        } else {
          num1 = Number(num1.toString().replace('.', '')) * cm
          num2 = Number(num2.toString().replace('.', ''))
        }
      } else {
        num1 = Number(num1.toString().replace('.', ''))
        num2 = Number(num2.toString().replace('.', ''))
      }
      return (num1 + num2) / m
    },
    acculateSub(num1, num2) {
      let r1, r2, m, n
      try {
        r1 = num1.toString().split('.')[1].length
      } catch (e) {
        r1 = 0
      }
      try {
        r2 = num2.toString().split('.')[1].length
      } catch (e) {
        r2 = 0
      }
      m = Math.pow(10, Math.max(r1, r2)) //last modify by deeka //动态控制精度长度
      n = r1 >= r2 ? r1 : r2
      return ((num1 * m - num2 * m) / m).toFixed(n)
    },
    yyrEmit(e) {
      this.yyr = e
    },
  },
}
</script>
<style lang="scss" scoped>
[v-cloak] {
  display: none !important;
}

.main-demo {
  /*width: 100%;
  height: 100%;*/
  width: 7680px;
  height: 2160px;
  overflow-y: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url('../../assets/images/newBgc.jpg') no-repeat;
  background-size: 100% 100%;

  .clt {
    width: 1620px;
    height: 100%;
    float: left;

    .homeClt {
      width: 100%;
      height: 100%;
      position: relative;
    }
  }

  .lishui {
    width: 6060px;
    height: 100%;
    float: left;

    .home {
      width: 100%;
      height: 100%;
      position: relative;
    }

    .jsonMap {
      width: 2060px;
      left: 0;
      height: 1434px;
      position: absolute;
      top: 280px;
      z-index: 100;
      .jm-item {
        width: 100%;
        margin-top: 20px;
        height: 84px;
        float: left;
        font-size: 60px;
        margin-bottom: 30px;
        padding-top: 0;
        line-height: 84px;
      }
    }
  }
}
.main-demo_wel {
  background: url('../../assets/images/welcome.jpg') no-repeat;
}
</style>
